<template>
	<el-card>
		<div slot="header">
			<span>文章列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" type="index" prop="article_id">
			</el-table-column>
			<el-table-column prop="cate_1st_name" label="一级分类">
			</el-table-column>
			<el-table-column prop="cate_2nd_name" label="二级分类">
			</el-table-column>
			<el-table-column prop="main_photo" label="主图">
				<template slot-scope="scope">
					<el-avatar shape="square" :size="100" :src="scope.row.main_photo"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="title" label="标题" width="180">
			</el-table-column>
			<el-table-column label="标签">
				<template slot-scope="scope">
					<el-tag v-for="item in scope.row.tags" :key="item.tag_id" effect="plain" size="medium">
						{{ item.tag_name }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="发布日期" width="90">
			</el-table-column>
			<el-table-column prop="update_time" label="更新日期" width="90">
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button v-permission="'article:list:edit'" @click="openEditEdge(scope.row)" icon="el-icon-edit">编辑</el-button>
					<el-button v-permission="'article:list:audit'" @click="openDialog" icon="el-icon-collection-tag">标记</el-button>
					<el-button v-permission="'article:list:tag'" icon="el-icon-collection-tag" style="margin-left: 0;">审核</el-button>
					<el-button v-permission="'article:list:remove'" @click="handleRemove(scope.row.article_id, scope.$index)" type="danger"
						icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="标记文章" :visible.sync="dialog_visible">
			<el-form class=" is-justify-space-between">
				<el-form-item label="您可以添加多个标签：" prop="insert_tag">
					<div style="float: right;">
						<el-input placeholder="找不到标签？请在此处搜索" style="width: 240px; margin-top: 0;">
							<template slot="append"><i class=" el-icon-search"></i></template>
						</el-input>
						<el-button type="success" plain style="margin-top: 0; margin-left: 10px;"><i
								class=" el-icon-circle-plus-outline"></i>
							创建标签</el-button>
					</div>
				</el-form-item>
				<el-form-item>
					<div
						style="border: 1px solid #eee; padding-left: 10px; padding-top: 6px; border-radius: 5px; height: 40px;">
						<el-tag closable type="success" v-for="(item, index) in insert_tag" :key="item.tag_id"
							@close="handleClose(item, index)">{{
								item.tag_name }}</el-tag>
					</div>
				</el-form-item>
				<el-form-item prop="tagList">
					<template>
						<el-button type="success" size="mini" plain v-for="item in tagList" :key="item.tag_id"
							@click="handleAddTag(item)">{{ item.tag_name }}</el-button>
					</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" plain @click="dialog_visible = false">取 消</el-button>
				<el-button type="success" @click="handleAdd">确 定</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import { Article,Tag } from '@/api';
export default {
	data() {
		return {
			tableData: [],
			tagList: [],
			insert_tag: [],
			dialog_visible: false,
			article: '',
			tags: [],
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Article.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		// 打开编辑
		openEditEdge(article) {
			let { article_id } = article;
			this.$router.push(`edit/${article_id}`);
		},
		//打开标记
		async openDialog(row) {
			this.article = row;
			this.dialog_visible = true;
			let { status, msg, data } = await Tag.list();
			if (status) {
				this.tagList = { ...data };
			} else {
				this.$message.error(msg);
			}
		},
		//添加标签
		handleAddTag(tag) {
			this.insert_tag.push(tag);
			this.tags.push(tag.tag_id);
		},
		//删除标签
		handleClose(tag, index) {
			this.insert_tag.splice(index, 1);
			this.tags.splice(index, 1);
		},
		//确定添加
		async handleAdd() {
			let { status, msg } = await Article.tag({ article_id: this.article.article_id, tags: this.tags });
			if (status) {
				this.article.tags = { ...this.insert_tag };
				this.$message.success(msg);
				this.dialog_visible = false;
			} else {
				this.$message.error(msg);
			}
		},
		handleRemove(article_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await Article.remove({ article_id });
					if (status) {
						//操作DOM
						this.tableData.splice(index, 1);
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},
}
</script>

<style></style>
